<template>
  <div class="product Info">
    <div class="title">常用商品</div>
    <ul class="product-list">
      <li @click="goodsClick(good)" v-for="good in oftenData" :key="good.goodsId">
        <span>{{good.goodsName}}</span>
        <span>￥{{good.price}}</span>
      </li>
    </ul>
    <el-tabs class="product-tabs">
      <el-tab-pane :label="tabData[index]" v-for="(goods, index) in type0Goods" :key="index">
        <ul class="cookList">
          <li @click="goodsClick(good)" v-for="good in goods" :key="good.goodsId">
            <span class="foodImg"><img :src="good.goodsImg" width="100%"></span>
            <span class="foodName">{{good.goodsName}}</span>
            <span class="foodPrice">￥{{good.price}}元</span>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tabData: ['汉堡', '鸡腿', '薯条', '套餐']
    }
  },
  props: {
    type0Goods: Array,
    oftenData: Array
  },
  methods: {
    goodsClick (good) {
      this.$emit('add', good)
    }
  }
};
</script>
<style scoped>
.product {
  height: 100%;
  background-color: #e5e9f2;
}
.product-tabs{
  padding: 15px;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: left;
}
.product-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.product-list li {
  list-style: none;
  float: left;
  border: 1px solid #dedce6;
  padding: 10px;
  margin: 13px;
  background-color: #fff;
  cursor: pointer;
}
.cookList{
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auot;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  cursor: pointer;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 18px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
</style>


